<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">工程记录</text>
		</view>

		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="filter-tabs">
				<view class="filter-tab" :class="{ active: filterStatus === 'all' }" @click="setFilter('all')">
					<text>全部</text>
				</view>
				<view class="filter-tab" :class="{ active: filterStatus === 'unpaid' }" @click="setFilter('unpaid')">
					<text>未付款</text>
				</view>
				<view class="filter-tab" :class="{ active: filterStatus === 'partial' }" @click="setFilter('partial')">
					<text>部分付款</text>
				</view>
				<view class="filter-tab" :class="{ active: filterStatus === 'paid' }" @click="setFilter('paid')">
					<text>已结清</text>
				</view>
			</view>
		</view>

		<!-- 项目列表 -->
		<view class="project-list" v-if="filteredProjects.length > 0">
			<view v-for="project in filteredProjects" :key="project.id" class="project-item">
				<view class="project-header" @click="viewProject(project)">
					<text class="customer-name">{{ project.customer }}</text>
					<text class="project-status" :class="project.status">{{ getStatusText(project.status) }}</text>
				</view>
				<view class="project-info" @click="viewProject(project)">
					<text class="community">{{ project.community }} - {{ project.room }}</text>
					<text class="total-amount">¥{{ project.totalAmount }}</text>
				</view>
				<view class="project-footer">
					<text class="create-time">{{ formatDate(project.createTime) }}</text>
					<view class="action-buttons">
						<button class="status-btn" @click="changeStatus(project)">修改状态</button>
						<button class="edit-btn" @click="editProject(project)">编辑</button>
						<button class="delete-btn" @click="deleteProject(project)">删除</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<text class="empty-text">暂无工程记录</text>
			<text class="empty-desc">点击下方按钮添加第一个工程款记录</text>
		</view>

		<!-- 添加按钮 -->
		<view class="add-section">
			<button class="add-btn" @click="addProject">+ 添加工程款</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			projects: [],
			filterStatus: 'all'
		}
	},
	computed: {
		filteredProjects() {
			if (this.filterStatus === 'all') {
				return this.projects
			}
			return this.projects.filter(project => project.status === this.filterStatus)
		}
	},
	onShow() {
		this.loadProjects()
	},
	methods: {
		loadProjects() {
			const projects = uni.getStorageSync('engineering_projects') || []
			this.projects = projects.sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
		},
		setFilter(status) {
			this.filterStatus = status
		},
		addProject() {
			uni.navigateTo({
				url: '/pages/add/add'
			})
		},
		viewProject(project) {
			uni.navigateTo({
				url: `/pages/project-detail/project-detail?id=${project.id}`
			})
		},
		editProject(project) {
			uni.navigateTo({
				url: `/pages/add/add?id=${project.id}`
			})
		},
		changeStatus(project) {
			const statusOptions = [
				{ text: '未付款', value: 'unpaid' },
				{ text: '部分付款', value: 'partial' },
				{ text: '已结清', value: 'paid' }
			]
			
			uni.showActionSheet({
				itemList: statusOptions.map(option => option.text),
				success: (res) => {
					const newStatus = statusOptions[res.tapIndex].value
					this.updateProjectStatus(project.id, newStatus)
				}
			})
		},
		updateProjectStatus(projectId, newStatus) {
			const projects = uni.getStorageSync('engineering_projects') || []
			const projectIndex = projects.findIndex(p => p.id === projectId)
			
			if (projectIndex !== -1) {
				projects[projectIndex].status = newStatus
				projects[projectIndex].updateTime = new Date().toISOString()
				
				// 如果是部分付款或已结清，记录付款信息
				if (newStatus === 'partial' || newStatus === 'paid') {
					this.recordPayment(projects[projectIndex], newStatus)
				}
				
				uni.setStorageSync('engineering_projects', projects)
				this.loadProjects()
				
				uni.showToast({
					title: '状态更新成功',
					icon: 'success'
				})
			}
		},
		recordPayment(project, status) {
			// 记录付款信息
			const payments = uni.getStorageSync('project_payments') || []
			const payment = {
				id: Date.now().toString(),
				projectId: project.id,
				projectName: `${project.customer} - ${project.community}`,
				amount: status === 'paid' ? project.totalAmount : project.totalAmount * 0.5, // 部分付款默认50%
				status: status,
				paymentTime: new Date().toISOString(),
				remark: status === 'paid' ? '全额付款' : '部分付款'
			}
			
			payments.push(payment)
			uni.setStorageSync('project_payments', payments)
		},
		deleteProject(project) {
			uni.showModal({
				title: '确认删除',
				content: `确定要删除 ${project.customer} 的工程记录吗？`,
				success: (res) => {
					if (res.confirm) {
						const projects = uni.getStorageSync('engineering_projects') || []
						const index = projects.findIndex(p => p.id === project.id)
						if (index !== -1) {
							projects.splice(index, 1)
							uni.setStorageSync('engineering_projects', projects)
							this.loadProjects()
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
						}
					}
				}
			})
		},
		getStatusText(status) {
			const statusMap = {
				'unpaid': '未付款',
				'partial': '部分付款',
				'paid': '已结清'
			}
			return statusMap[status] || '未知'
		},
		formatDate(dateString) {
			const date = new Date(dateString)
			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
		}
	}
}
</script>

<style scoped>
.container {
	background: #f5f5f5;
	min-height: 100vh;
	padding: 20rpx;
}

.page-header {
	text-align: center;
	padding: 40rpx 0;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.filter-bar {
	background: white;
	border-radius: 20rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.filter-tabs {
	display: flex;
	background: #f5f5f5;
	border-radius: 15rpx;
	padding: 5rpx;
}

.filter-tab {
	flex: 1;
	text-align: center;
	padding: 20rpx;
	border-radius: 10rpx;
	transition: all 0.3s;
}

.filter-tab.active {
	background: white;
	color: #667eea;
	font-weight: bold;
}

.project-list {
	margin-bottom: 40rpx;
}

.project-item {
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.project-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.customer-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.project-status {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	color: white;
}

.project-status.unpaid {
	background: #ff4757;
}

.project-status.partial {
	background: #ffa502;
}

.project-status.paid {
	background: #2ed573;
}

.project-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.community {
	font-size: 28rpx;
	color: #666;
}

.total-amount {
	font-size: 32rpx;
	font-weight: bold;
	color: #667eea;
}

.project-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.create-time {
	font-size: 24rpx;
	color: #999;
}

.action-buttons {
	display: flex;
	gap: 16rpx;
}

.status-btn, .edit-btn, .delete-btn {
	padding: 12rpx 24rpx;
	border-radius: 8rpx;
	font-size: 24rpx;
	border: none;
}

.status-btn {
	background: #ffa502;
	color: white;
}

.edit-btn {
	background: #667eea;
	color: white;
}

.delete-btn {
	background: #ff4757;
	color: white;
}

.empty-state {
	text-align: center;
	padding: 100rpx 40rpx;
}

.empty-text {
	font-size: 32rpx;
	color: #999;
	margin-bottom: 20rpx;
	display: block;
}

.empty-desc {
	font-size: 28rpx;
	color: #ccc;
	display: block;
}

.add-section {
	padding: 40rpx 0;
}

.add-btn {
	width: 100%;
	padding: 30rpx;
	background: linear-gradient(135deg, #667eea, #764ba2);
	color: white;
	border: none;
	border-radius: 16rpx;
	font-size: 32rpx;
	font-weight: bold;
	box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
}
</style>
